﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>虚拟键盘</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/root.css" rel="stylesheet" type="text/css" />
    <link href="css/ohos_2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-default" style="margin-bottom:0;border:0;background:#f2f3f5">
    <div class="container-fluid">
        <div class="navbar-header" style="text-align:center;">
            <a class="navbar-brand" href="#" style="float:none;line-height:50px;color:#555;">
                OHOS 虚拟键盘
            </a>
        </div>
    </div>
</nav>

<div id="main" class="container">
    <div>
        <div class="alert alert-success" role="alert" style="margin:0;margin-top:1.5rem;font-size:13px;text-align:center;font-style:italic;">OHOS开源应用社区：https://gitee.com/ohos-dev</div>
        <div class="TXXX">
            <div class="input-group col-xs-12 col-sm-6" style="padding:0"></div>
                <textarea class="form-control test-input-method" id='text1' rows="5" placeholder="" name="text1" onclick="stopKeyboard($(this))" onfocus="stopKeyboard($(this))" style="font-size:18px;resize:none;"></textarea>
            </div>
            <div class="row" style="margin-bottom: 1em;">
                <div class="col col-xs-6">
                    <button class="btn btn-primary btn-block" onclick="_copy()">复制</button>
                </div>
                <div class="col col-xs-6">
                    <button class="btn btn-block" onclick="_reset()">重置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 键盘div -->
    <div id="keyboard">
        <div style="width:100%;height:40px;padding-right:6px;padding-top:6px;">
            <button type="button" class="btn btn-block" id="btn-diappear">隐藏键盘</button>
        </div>
        <ul id="boardword">
            <li class="gray firstitem">1</li>
            <li class="gray">2</li>
            <li class="gray">3</li>
            <li class="gray">4</li>
            <li class="gray">5</li>
            <li class="gray">6</li>
            <li class="gray">7</li>
            <li class="gray">8</li>
            <li class="gray">9</li>
            <li class="gray">0</li>
            <li class="letter firstitem">q</li>
            <li class="letter">w</li>
            <li class="letter">e</li>
            <li class="letter">r</li>
            <li class="letter">t</li>
            <li class="letter">y</li>
            <li class="letter">u</li>
            <li class="letter">i</li>
            <li class="letter">o</li>
            <li class="letter">p</li>
            <li class="firstitem capslock gray">大写</li>
            <li class="letter">a</li>
            <li class="letter">s</li>
            <li class="letter">d</li>
            <li class="letter">f</li>
            <li class="letter">g</li>
            <li class="letter">h</li>
            <li class="letter">j</li>
            <li class="letter">k</li>
            <li class="letter">l</li>
            <li class="firstitem left-shift gray">中</li>
            <li class="letter">z</li>
            <li class="letter">x</li>
            <li class="letter">c</li>
            <li class="letter">v</li>
            <li class="letter">b</li>
            <li class="letter">n</li>
            <li class="letter">m</li>
            <li class="right-shift lastitem delete gray">删除</li>
        </ul>
    </div>
</div>

<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/dict/pinyin_dict_notone.js" type="text/javascript"></script>
<script src="js/pinyinUtil.js" type="text/javascript"></script>
<script src="js/simple-input-method.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/keyboard.js" type="text/javascript"></script>
<script type="text/javascript">
function stopKeyboard(obj)
{
    obj.attr('readonly', 'readonly');
    setTimeout(function() {
        obj.removeAttr('readonly');
    }, 100);
}
</script>
<script type="text/javascript">
    $(function () {
        //判断是否加载哪个版本的modaljs
        if (isPC()) {
            loadScript("js/pcmodal.js?v=20171026");
        } else {
            loadScript("js/modal.js");
        }
        
        // //初始化键盘事件		
        // checkWrite();
        // initkey();

        activeId = "text1";
        keyb();

        //处理键盘样式高度问题
        $("#keyboard").height($("#keyboard").height() + 40);
        $("#keyboard").attr("cheight", $("#keyboard").height());

        //绑定折叠事件
        $("#btn-diappear").click(function () {
            if ($(this).html() == "隐藏键盘") {
                if (!$("#boardword").hasClass("hide")) {
                    $("#boardword").addClass("hide");
                }
                var btnH = $(this).height() + 30;
                //console.log("修改的键盘高度" + btnH);
                $("#keyboard").css({
                    "height": btnH
                }, {
                    "background-color": "transparent"
                });
                $(this).html("显示键盘");
            } else if ($(this).html() == "显示键盘") {
                if ($("#boardword").hasClass("hide")) {
                    $("#boardword").removeClass("hide");
                }
                $("#keyboard").css({
                    "height": $("#keyboard").attr("cheight") + 'px'
                }, {
                    "background-color": "#d4d5da"
                });
                $(this).html("隐藏键盘");
            }

        });
    })

    // 判断当前是pc端还是移动端
    function isPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "OpenHarmony", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    // 动态加载相关js文件
    function loadScript(url) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.body.appendChild(script);
    }

    function _copy() {
        try {
            extObj.copy($('#text1').val());
        } catch(e) {
            console.error("extObj is not defined");
        }
    }

    function _reset() {
        $('#text1').val('');
    }
</script>
</body>
</html>